<!--
 * @Author: thats-all-right-ha-ha 8280209+thats-all-right-ha-ha@user.noreply.gitee.com
 * @Date: 2024-06-19 19:58:18
 * @LastEditors: thats-all-right-ha-ha 8280209+thats-all-right-ha-ha@user.noreply.gitee.com
 * @LastEditTime: 2024-06-21 09:02:02
 * @FilePath: \cq-admin-vue3\src\views\auth\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import { getData, change, delAdmin } from '@/api/auth'
import { getTableList } from '@/utils/Data'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
//分页
const pag = ref({
  page: 1,
  pageSize: 10,
  pagetotal: 10
})
const tableData = ref(null)
const getList = () => {
  getTableList(getData, pag, tableData)
}
getList()
const roles = ref([
  {
    label: '管理员',
    value: 1
  },
  {
    label: '编辑人员',
    value: 0
  }
])
//修改权限
const updateRole = async (scope) => {
  await change({ id: scope.row.id, role: scope.row.role })
  ElMessage({
    type: 'success',
    message: '权限修改成功'
  })
}

//删除
const del = async (id) => {
  await delAdmin(id)
  ElMessage({
    type: 'success',
    message: '删除成功'
  })
  getList()
}
</script>
<template>
  <div class="padding">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="_id" label="ID" width="180">
        <template v-slot="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="username" label="用户名" width="180" />
      <el-table-column label="角色">
        <template v-slot="scope">
          <div v-if="scope.row.username !== 'admin123'">
            <el-select
              v-model="scope.row.role"
              placeholder="请选择角色"
              :disabled="!scope.row.disabled"
              @change="updateRole(scope)"
            >
              <el-option
                v-for="item in roles"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="update_time" label="更新时间" />
      <el-table-column label="设置角色">
        <template v-slot="scope">
          <div v-if="scope.row.username !== 'admin123'">
            <el-button @click="scope.row.disabled = !scope.row.disabled">
              {{ scope.row.disabled ? '取消编辑' : '编辑角色' }}
            </el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column>
        <template v-slot="scope">
          <div v-if="scope.row.username !== 'admin123'">
            <el-button @click="del(scope.row.id)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-pagination
    background
    layout="prev, pager, next"
    :total="pag.pagetotal"
    v-model:page-size="pag.pageSize"
    v-model:current-page="pag.page"
    @change="getList"
  />
</template>
<style lang="scss" scoped></style>
